<template>
  <view class="access-control-page">


    <!-- 门禁状态概览 -->
    <view class="status-overview">
      <view class="overview-header">
        <view class="overview-title">门禁状态概览</view>
      </view>
      <view class="overview-actions">
        <u-button 
          type="info" 
          size="small" 
          text="权限管理" 
          @click="showPermissionModal = true"
        ></u-button>
      </view>
      <view class="status-grid">
        <view 
          v-for="gate in gateStatus" 
          :key="gate.id"
          class="status-card"
          :class="{ 'status-card--offline': !gate.online }"
        >
          <view class="gate-icon">
            <u-icon 
              :name="gate.icon" 
              :color="gate.online ? '#2ed573' : '#ff4757'" 
              size="24"
            ></u-icon>
          </view>
          <view class="gate-info">
            <view class="gate-name">{{ gate.name }}</view>
            <view class="gate-status">{{ gate.online ? '在线' : '离线' }}</view>
          </view>
          <view class="gate-action">
            <u-button 
              v-if="gate.online"
              type="primary" 
              size="mini" 
              text="开门" 
              @click="openGate(gate)"
            ></u-button>
            <u-button 
              v-else
              type="error" 
              size="mini" 
              text="离线" 
              disabled
            ></u-button>
          </view>
        </view>
      </view>
    </view>

    <!-- 快速开门区域 -->
    <view class="quick-open-section">
      <view class="quick-open-grid">
        <view 
          v-for="action in quickActions" 
          :key="action.id"
          class="quick-action-card"
          @click="executeQuickAction(action)"
        >
          <view class="action-icon" :style="{ background: action.color }">
            <u-icon :name="action.icon" color="#fff" size="24"></u-icon>
          </view>
          <view class="action-text">{{ action.name }}</view>
        </view>
      </view>
    </view>

    <!-- 最近开门记录 -->
    <view class="recent-records">
      <scroll-view 
        scroll-y="true" 
        class="records-list"
        :style="{ height: '300px' }"
      >
        <view class="list-content">
          <view 
            v-for="record in recentRecords" 
            :key="record.id"
            class="record-item"
          >
            <view class="record-icon">
              <u-icon 
                :name="record.type === 'open' ? 'unlock' : 'lock'" 
                :color="record.type === 'open' ? '#2ed573' : '#ff4757'" 
                size="20"
              ></u-icon>
            </view>
            <view class="record-info">
              <view class="record-title">{{ record.title }}</view>
              <view class="record-details">
                {{ record.gateName }} · {{ record.userName }} · {{ record.time }}
              </view>
            </view>
            <view class="record-status">
              <u-tag 
                :text="record.statusText" 
                :type="getRecordStatusType(record.status)"
                size="small"
              ></u-tag>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 权限管理弹窗 -->
    <u-popup 
      :show="showPermissionModal" 
      mode="center" 
      :round="10"
      @close="showPermissionModal = false"
    >
      <view class="permission-modal">
        <view class="modal-header">
          <text class="modal-title">权限管理</text>
          <u-icon name="close" size="20" @click="showPermissionModal = false"></u-icon>
        </view>
        <view class="modal-content">
          <view class="permission-tabs">
            <view 
              v-for="tab in permissionTabs" 
              :key="tab.key"
              class="permission-tab"
              :class="{ 'permission-tab--active': activePermissionTab === tab.key }"
              @click="activePermissionTab = tab.key"
            >
              {{ tab.label }}
            </view>
          </view>
          
          <view class="permission-content">
            <!-- 用户权限 -->
            <view v-if="activePermissionTab === 'users'" class="permission-section">
              <view class="section-header">
                <text class="section-title">用户权限列表</text>
                <u-button type="primary" size="mini" text="添加用户" @click="addUserPermission"></u-button>
              </view>
              <view class="user-list">
                <view 
                  v-for="user in userPermissions" 
                  :key="user.id"
                  class="user-item"
                >
                  <view class="user-info">
                    <u-avatar :src="user.avatar" :text="user.name.charAt(0)" size="40"></u-avatar>
                    <view class="user-details">
                      <view class="user-name">{{ user.name }}</view>
                      <view class="user-phone">{{ user.phone }}</view>
                    </view>
                  </view>
                  <view class="user-actions">
                    <u-button 
                      type="warning" 
                      size="mini" 
                      text="编辑" 
                      @click="editUserPermission(user)"
                    ></u-button>
                    <u-button 
                      type="error" 
                      size="mini" 
                      text="删除" 
                      @click="removeUserPermission(user)"
                    ></u-button>
                  </view>
                </view>
              </view>
            </view>
            
            <!-- 门禁权限 -->
            <view v-if="activePermissionTab === 'gates'" class="permission-section">
              <view class="section-header">
                <text class="section-title">门禁权限配置</text>
                <u-button type="primary" size="mini" text="配置权限" @click="configureGatePermissions"></u-button>
              </view>
              <view class="gate-permissions">
                <view 
                  v-for="gate in gatePermissions" 
                  :key="gate.id"
                  class="gate-permission-item"
                >
                  <view class="gate-permission-info">
                    <view class="gate-permission-name">{{ gate.name }}</view>
                    <view class="gate-permission-desc">{{ gate.description }}</view>
                  </view>
                  <view class="gate-permission-status">
                    <u-switch 
                      v-model="gate.enabled" 
                      @change="toggleGatePermission(gate)"
                    ></u-switch>
                  </view>
                </view>
              </view>
            </view>
            
            <!-- 时间权限 -->
            <view v-if="activePermissionTab === 'time'" class="permission-section">
              <view class="section-header">
                <text class="section-title">时间权限设置</text>
                <u-button type="primary" size="mini" text="设置时间" @click="setTimePermission"></u-button>
              </view>
              <view class="time-permissions">
                <view class="time-permission-item">
                  <view class="time-label">工作日开门时间</view>
                  <view class="time-value">06:00 - 23:00</view>
                </view>
                <view class="time-permission-item">
                  <view class="time-label">周末开门时间</view>
                  <view class="time-value">07:00 - 22:00</view>
                </view>
                <view class="time-permission-item">
                  <view class="time-label">节假日开门时间</view>
                  <view class="time-value">08:00 - 21:00</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 开门确认弹窗 -->
    <u-popup 
      :show="showOpenConfirm" 
      mode="center" 
      :round="10"
      @close="showOpenConfirm = false"
    >
      <view class="open-confirm-modal">
        <view class="confirm-header">
          <u-icon name="unlock" color="#2ed573" size="40"></u-icon>
          <text class="confirm-title">确认开门</text>
        </view>
        <view class="confirm-content">
          <text class="confirm-text">确定要打开"{{ selectedGate?.name }}"吗？</text>
          <text class="confirm-note">开门操作将被记录，请谨慎操作</text>
        </view>
        <view class="confirm-actions">
          <u-button type="info" text="取消" @click="showOpenConfirm = false"></u-button>
          <u-button type="primary" text="确认开门" @click="confirmOpenGate"></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
/**
 * 门禁控制页面
 * @author Wu.Liang
 * @date 2025-01-30
 * @version 1.0.0
 * @description 门禁控制功能，包含门禁状态、远程开门、权限管理等
 */

import { ref, reactive, computed, onMounted } from 'vue'

// 页面状态
const showPermissionModal = ref(false)
const showOpenConfirm = ref(false)
const activePermissionTab = ref('users')
const selectedGate = ref(null)

// 门禁状态数据
const gateStatus = ref([
  {
    id: 1,
    name: '小区大门',
    icon: 'home',
    online: true,
    status: 'normal'
  },
  {
    id: 2,
    name: '1栋单元门',
    icon: 'building',
    online: true,
    status: 'normal'
  },
  {
    id: 3,
    name: '2栋单元门',
    icon: 'building',
    online: true,
    status: 'normal'
  },
  {
    id: 4,
    name: '3栋单元门',
    icon: 'building',
    online: false,
    status: 'offline'
  },
  {
    id: 5,
    name: '地下车库门',
    icon: 'car',
    online: true,
    status: 'normal'
  },
  {
    id: 6,
    name: '后门',
    icon: 'gate',
    online: true,
    status: 'normal'
  }
])

// 快速开门操作
const quickActions = ref([
  {
    id: 1,
    name: '小区大门',
    icon: 'home',
    color: '#3742fa',
    gateId: 1
  },
  {
    id: 2,
    name: '1栋单元门',
    icon: 'building',
    color: '#2ed573',
    gateId: 2
  },
  {
    id: 3,
    name: '2栋单元门',
    icon: 'building',
    color: '#ff9500',
    gateId: 3
  },
  {
    id: 4,
    name: '地下车库',
    icon: 'car',
    color: '#9b59b6',
    gateId: 5
  }
])

// 最近开门记录
const recentRecords = ref([
  {
    id: 1,
    type: 'open',
    title: '远程开门成功',
    gateName: '小区大门',
    userName: '张三',
    time: '2025-01-30 14:30',
    status: 'success',
    statusText: '成功'
  },
  {
    id: 2,
    type: 'open',
    title: '远程开门成功',
    gateName: '1栋单元门',
    userName: '李四',
    time: '2025-01-30 14:25',
    status: 'success',
    statusText: '成功'
  },
  {
    id: 3,
    type: 'close',
    title: '门禁自动关闭',
    gateName: '2栋单元门',
    userName: '系统',
    time: '2025-01-30 14:20',
    status: 'info',
    statusText: '自动'
  },
  {
    id: 4,
    type: 'open',
    title: '远程开门成功',
    gateName: '地下车库门',
    userName: '王五',
    time: '2025-01-30 14:15',
    status: 'success',
    statusText: '成功'
  },
  {
    id: 5,
    type: 'open',
    title: '远程开门失败',
    gateName: '3栋单元门',
    userName: '赵六',
    time: '2025-01-30 14:10',
    status: 'error',
    statusText: '失败'
  }
])

// 权限管理标签页
const permissionTabs = ref([
  { key: 'users', label: '用户权限' },
  { key: 'gates', label: '门禁权限' },
  { key: 'time', label: '时间权限' }
])

// 用户权限列表
const userPermissions = ref([
  {
    id: 1,
    name: '张三',
    phone: '138****1234',
    avatar: '',
    role: '业主',
    permissions: ['小区大门', '1栋单元门']
  },
  {
    id: 2,
    name: '李四',
    phone: '139****5678',
    avatar: '',
    role: '住户',
    permissions: ['小区大门', '2栋单元门']
  },
  {
    id: 3,
    name: '王五',
    phone: '137****9012',
    avatar: '',
    role: '访客',
    permissions: ['小区大门']
  }
])

// 门禁权限配置
const gatePermissions = ref([
  {
    id: 1,
    name: '小区大门',
    description: '主要出入口，24小时开放',
    enabled: true
  },
  {
    id: 2,
    name: '1栋单元门',
    description: '1栋住户专用门禁',
    enabled: true
  },
  {
    id: 3,
    name: '2栋单元门',
    description: '2栋住户专用门禁',
    enabled: true
  },
  {
    id: 4,
    name: '3栋单元门',
    description: '3栋住户专用门禁',
    enabled: false
  },
  {
    id: 5,
    name: '地下车库门',
    description: '车辆进出专用门禁',
    enabled: true
  }
])

// 方法
const goBack = () => {
  uni.navigateBack()
}

const openGate = (gate) => {
  if (!gate.online) {
    uni.showToast({
      title: '门禁设备离线',
      icon: 'none'
    })
    return
  }
  
  selectedGate.value = gate
  showOpenConfirm.value = true
}

const executeQuickAction = (action) => {
  const gate = gateStatus.value.find(g => g.id === action.gateId)
  if (gate) {
    openGate(gate)
  }
}

const confirmOpenGate = () => {
  if (!selectedGate.value) return
  
  // 模拟开门操作
  uni.showLoading({
    title: '正在开门...'
  })
  
  setTimeout(() => {
    uni.hideLoading()
    
    // 添加开门记录
    const newRecord = {
      id: Date.now(),
      type: 'open',
      title: '远程开门成功',
      gateName: selectedGate.value.name,
      userName: '当前用户',
      time: new Date().toLocaleString(),
      status: 'success',
      statusText: '成功'
    }
    
    recentRecords.value.unshift(newRecord)
    
    // 显示成功提示
    uni.showToast({
      title: '开门成功',
      icon: 'success'
    })
    
    // 关闭弹窗
    showOpenConfirm.value = false
    selectedGate.value = null
  }, 1500)
}

const getRecordStatusType = (status) => {
  const statusMap = {
    success: 'success',
    error: 'error',
    info: 'info',
    warning: 'warning'
  }
  return statusMap[status] || 'info'
}

const addUserPermission = () => {
  uni.showToast({
    title: '添加用户权限功能开发中',
    icon: 'none'
  })
}

const editUserPermission = (user) => {
  uni.showToast({
    title: `编辑用户"${user.name}"权限功能开发中`,
    icon: 'none'
  })
}

const removeUserPermission = (user) => {
  uni.showModal({
    title: '删除确认',
    content: `确定要删除用户"${user.name}"的门禁权限吗？`,
    success: (res) => {
      if (res.confirm) {
        const index = userPermissions.value.findIndex(u => u.id === user.id)
        if (index > -1) {
          userPermissions.value.splice(index, 1)
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          })
        }
      }
    }
  })
}

const configureGatePermissions = () => {
  uni.showToast({
    title: '门禁权限配置功能开发中',
    icon: 'none'
  })
}

const toggleGatePermission = (gate) => {
  const status = gate.enabled ? '启用' : '禁用'
  uni.showToast({
    title: `${gate.name}已${status}`,
    icon: 'success'
  })
}

const setTimePermission = () => {
  uni.showToast({
    title: '时间权限设置功能开发中',
    icon: 'none'
  })
}

// 页面加载
onMounted(() => {
  console.log('门禁控制页面加载完成')
})
</script>

<style lang="scss" scoped>
.access-control-page {
  min-height: 100vh;
  width: 100vw;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



.status-overview {
  background: white;
  padding: 16px;
  margin-bottom: 12px;
  
  .overview-header {
    margin-bottom: 12px;
    
    .overview-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      line-height: 1.2;
    }
  }
  
  .overview-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
  }
  
  .status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .status-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    
    &--offline {
      opacity: 0.6;
    }
    
    .gate-icon {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;
    }
    
    .gate-info {
      flex: 1;
      width: 100%;
      
      .gate-name {
        font-size: 12px;
        font-weight: 600;
        color: #333;
        margin-bottom: 4px;
        line-height: 1.2;
        word-break: break-all;
        display: block;
      }
      
      .gate-status {
        font-size: 10px;
        color: #666;
        line-height: 1.2;
        display: block;
        margin-bottom: 8px;
      }
    }
    
    .gate-action {
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
}

.quick-open-section {
  background: white;
  padding: 16px;
  margin-bottom: 12px;
  
  .quick-open-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .quick-action-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    
    &:active {
      transform: scale(0.95);
    }
    
    .action-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 8px;
    }
    
    .action-text {
      font-size: 13px;
      color: #333;
      font-weight: 500;
      line-height: 1.2;
    }
  }
}

.recent-records {
  background: white;
  padding: 16px;
  flex: 1;
  
  .records-list {
    .list-content {
      padding: 0;
    }
  }
  
  .record-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .record-icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .record-info {
      flex: 1;
      min-width: 0;
      
      .record-title {
        font-size: 13px;
        font-weight: 500;
        color: #333;
        margin-bottom: 3px;
        line-height: 1.2;
      }
      
      .record-details {
        font-size: 11px;
        color: #666;
        line-height: 1.2;
      }
    }
    
    .record-status {
      flex-shrink: 0;
    }
  }
}

.permission-modal {
  width: 90vw;
  max-width: 500px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  
  .modal-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
  }
  
  .modal-content {
    max-height: 70vh;
    overflow: hidden;
  }
}

.permission-tabs {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  
  .permission-tab {
    flex: 1;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    
    &--active {
      color: #3742fa;
      border-bottom-color: #3742fa;
    }
  }
}

.permission-content {
  padding: 20px;
  max-height: 50vh;
  overflow-y: auto;
}

.permission-section {
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
  }
}

.user-list {
  .user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .user-info {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .user-details {
        .user-name {
          font-size: 14px;
          font-weight: 500;
          color: #333;
          margin-bottom: 4px;
        }
        
        .user-phone {
          font-size: 12px;
          color: #666;
        }
      }
    }
    
    .user-actions {
      display: flex;
      gap: 8px;
    }
  }
}

.gate-permissions {
  .gate-permission-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .gate-permission-info {
      .gate-permission-name {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        margin-bottom: 4px;
      }
      
      .gate-permission-desc {
        font-size: 12px;
        color: #666;
      }
    }
  }
}

.time-permissions {
  .time-permission-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .time-label {
      font-size: 14px;
      color: #333;
    }
    
    .time-value {
      font-size: 14px;
      color: #666;
      font-weight: 500;
    }
  }
}

.open-confirm-modal {
  width: 80vw;
  max-width: 350px;
  background: white;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  
  .confirm-header {
    margin-bottom: 20px;
    
    .confirm-title {
      display: block;
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-top: 12px;
    }
  }
  
  .confirm-content {
    margin-bottom: 24px;
    
    .confirm-text {
      display: block;
      font-size: 16px;
      color: #333;
      margin-bottom: 8px;
    }
    
    .confirm-note {
      display: block;
      font-size: 12px;
      color: #666;
    }
  }
  
  .confirm-actions {
    display: flex;
    gap: 12px;
    
    .u-button {
      flex: 1;
    }
  }
}

// 响应式适配
@media screen and (max-width: 375px) {
  .status-overview,
  .quick-open-section,
  .recent-records {
    padding: 12px;
  }
  
  .status-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
  }
  
  .quick-open-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .status-card,
  .quick-action-card {
    padding: 12px;
  }
}

@media screen and (min-width: 414px) {
  .access-control-page {
    width: 100vw;
    max-width: none;
    margin: 0;
  }
}
</style>
